<template>
	<view class="mePace">
		<!-- 小程序不支持图片裁剪 -->
		<!-- #ifdef MP -->
		<image :src="tempFilePaths" mode="aspectFit" class="face"></image>
		<!-- #endif -->
		
		
		<!-- #ifndef MP -->
		<avatar
		       selWidth="400upx" selHeight="400upx" @upload="myUpload" :avatarSrc="tempFilePaths"
		       avatarStyle=" "
			   ref="avatar">
		</avatar >
		<!-- #endif -->
		<view class="log" v-if="!tempFilePaths">*从相册选择等比宽高的图片上传</view>
		<view class="footer">
			<text class="footer-item" @click="restart">重新选择</text>
			<text class="footer-item" @click="uploadFace">确认上传</text>
		</view>
	</view>
</template>

<script>
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				tempFilePaths:""
			}
		},
		methods: {
			myUpload(rsp) {
			    this.tempFilePaths = rsp.path; //更新头像方式一
			    // rsp.avatar.imgSrc = rsp.path; //更新头像方式二
			},
			restart(){
				let me=this
				// #ifndef MP-WEIXIN
				this.$refs.avatar.fSelect()
				// #endif
				
				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count:1,
					sizeType:["compessed"],
					success(res) {
						me.tempFilePaths=res.tempFilePaths[0]
					}
				})
				// #endif
			},
			uploadFace(){
				uni.showLoading({
					title:"上传中"
				})
				let me=this
				let userInfo=uni.getStorageSync("user")[0]
				let username=userInfo.username
				let token=userInfo.token
				console.log(token)
				console.log(me.root+'/api/uploadFace')
				uni.uploadFile({
					url:me.root+'/api/uploadFace',
					filePath:me.tempFilePaths,
					name:"img",
					header:{
						token
					},
					success(res) {
						let data=JSON.parse(res.data)
						if(data.err==0){
							uni.setStorageSync("user",data.data)
							uni.navigateTo({
								url:"../meInfo/meInfo"
							})
						}else{
							uni.showToast({
								title:data.msg,
								image:"/static/icos/error.png",
								duration:1000
							})
						}
					},
					complete(){
						uni.hideLoading()
					}
				})
			}
		},
		onLoad(query) {
			this.tempFilePaths=query.tempFilePaths
		},
		// #ifndef MP-WEIXIN
		mounted() {
			this.$refs.avatar.fSelect()
		},
		components: {
		    avatar
		}
		// #endif
	}
</script>

<style scoped>
.mePace{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
}
.log{
	margin-top: 60%;
	text-align: center;
	position: absolute;
	width: 100%;
	color: #999;
	font-size: 12px;
}
.footer{
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	width: 100%;
	border-top: 1px solid #555;
	font-size: 13px;
	height: 100upx;
	align-items: center;
	z-index: 999;
	background-color: #000000;
}
.footer-item{
	padding: 0 30upx;
	color: #FFF;
}
.face{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 99;
	padding-bottom: 100upx;
	box-sizing: border-box;
}
</style>
